package myJs.cps

import myJs.Implicits._
import myJs.cps.Style
import myJs.cps.PureInputCp
import myJs.myPkg.reactHookForm._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.scalajs.js

/**
 * Created by yz on 3/11/2020
 */
@react object InputInlineGroupCp {

  case class Props(useForm: UseFormRT,
                   name: String,
                   value: String,
                   label: String,
                   show: Boolean = true,
                   questionInfo: String = "",
                   registerOptions: RegisterOptions = RegisterOptions(),
                   onChange: js.UndefOr[String => Unit] = js.undefined,
                  )


  val component = FunctionalComponent[Props] { props =>

    useEffect(() => {
    }, List()
    )

    useEffect(() => {
      props.useForm.trigger(props.name)
    }, List(props.show)
    )

    val hasErrorCls = if (props.useForm.formState.errors.deepDefinedAt(props.name)) "has-error" else ""

    val displayStr = if (props.show) csstypeStrings.block else csstypeStrings.none
    div(style := Style(display = displayStr), className := s"form-group ${hasErrorCls}",
      label(className := "control-label col-sm-2", s"${props.label}",
        if (props.questionInfo.nonBlank) {
          span(className := "",
            a(`type` := "button", className := "selfQuestion", title := "note", data - "container" := "body",
              data - "toggle" := "popover", data - "html" := "true",
              data - "placement" := "left",
              data - "content" := props.questionInfo,
              data - "trigger" := "click",
              i(className := "fa fa-question-circle-o")
            ),
          )
        } else null, ":"
      ),
      div(className := "col-sm-4",
        div(className := "input-group",
          PureInputCp(useForm = props.useForm, name = s"${props.name}Show", value = s"${props.show}", `type` = "hidden"),
          PureInputCp(useForm = props.useForm, name = props.name, value = props.value,
            registerOptions = props.registerOptions, onChange = props.onChange, showValidate = false),
          span(className := "input-group-addon", "%")
        ),
        if (props.useForm.formState.errors.deepDefinedAt(props.name)) {
          small(className := "help-block", props.useForm.formState.errors.deepGet(props.name).message)
        } else null
      ),
    )
  }

}



